@charset "UTF-8";

@import "base";
html{
  font-size: 100px;
}
//首页
body{
  background: url(../publics/image/bg5.png);
}
//主内容区域
.healthy_layout{
  width:100%;
  min-width: 320px;
 /* max-width: 750px;*/
  margin:0 auto;
  padding-top:.1rem;
}
//侧边导航部分
.crumb{
  width:4rem;
  background-color: #e7eaee;
  position: fixed;
  top: .1rem;
  left:-4rem;
  z-index: 9999;
  border-radius: 0 0 0.01rem 0;

  h2{
    font-size: .2rem;
    text-align: center;
    margin-top: 0px;
    padding-bottom: .25rem;
    padding-left: .3rem;
    padding-top: .1rem;
    background: #e7eaee;
    text-transform: capitalize;
    font-weight: 400;

  }
  .title{
    display: block;
    height: .8rem;
    width: .8rem;
    position: absolute;
    right: -.8rem;
    top: 0;
    border-radius: 0 .01rem .01rem 0;
    padding-right: .02rem;
    padding-bottom: .02rem;
    padding-top: .02rem;
    color:#2a6496;
    .icon-switcher{
      background: #F9F7F6;
      margin-left: 0px;
      margin-top: -.1rem;
      padding: .25rem .24rem;
      position: absolute;
      font-size: .1rem;
    }
  }
  dl{
    margin-bottom:.1rem;
    dd{
      height:1rem;
      line-height:1rem;
      a{
        display:block;
        height:1rem;
        line-height:1rem;
        font-size: .3rem;
        padding-left:.1rem;
        span:first-of-type{
          display:inline-block;
          height:.5rem;
          width:.5rem;
          text-align:center;
          line-height:.5rem;
          border-radius: 50%;
          background: #46c8ce;
          color:#fff;
        }
      }
    }
    dd:first-of-type{
      margin-top:0;
    }
  }
}
//头部
.healthy_layout_header{
  width:90%;
  background: #3B5998;
  margin:0 auto .1rem;
  padding:.5rem 0;
  .title_img{
    width:2rem;
    margin:0 auto;
    height:2rem;
    a{
      display:block;
      margin-top:.1rem;
      width:100%;
      height:100%;
      img{
        width:100%;
        height:100%;
        border-radius: 50%;
        -webkit-border-radius: 50%;
      }
    }
  }
  p{
    height:.8rem;
    line-height: .8rem;
    color:#fff;
    text-align:center;
    font-size:.4rem;
  }
}
//内容区域
.healthy_layout_content{
  width:90%;
  margin:0.2rem auto;
  .tabs{
    background: @mainColor;
    padding-top:.2rem;
    padding-bottom:.2rem;
    margin-bottom:.2rem;
    ul{
      display:flex;
      li{
        float:left;
        flex:1;
        text-align: center;
        a{
          display:block;
          height:1rem;
          width:1rem;
          margin:0 auto;
          .icon_title{
            display:inline-block;
            height:1rem;
            width:1rem;
            background: #fff;
            border-radius: 50%;
            text-align: center;
            line-height: 1rem;
            font-size:.4rem;
            color:@mainColor;
          }
        }
        p{
          height:1rem;
          line-height:1rem;
          color:#fff;
          font-size:.3rem;
        }
      }
    }
  }
  .tab_List{
    .activeTab{
      h2{
        background: #3B5998;
        padding:.3rem;
        height:1.2rem;
        width:100%;
        color:#fff;
        border-bottom:1px solid rgba(255, 255, 255, 0.1);
        .icon_title{
          display:inline-block;
          height:.8rem;
          width:.8rem;
          background: #fff;
          border-radius: 50%;
          text-align: center;
          line-height: .8rem;
          color:@mainColor;
          margin-right:.15rem;
        }
        .icon_padding{
          padding-top:.4rem;
        }
      }
      .content_detail{
        height:100%;
        background: #f3f3f3;
        padding:.2rem .5rem;
        .about li{
          height:1rem;
          line-height:1rem;
          width:100%;
          border-bottom: 1px solid #e6e6e6;
        }
      }
      .color{
        color: @mainColor;
      }
      .title_content{
        display: inline-block;
        font-size: .44rem;
        color: @mainColor;
        width: 100%;
        margin-bottom:.4rem;
        border-bottom: 1px solid #DDD;
        .text_content{
          padding:.3rem 0 .1rem;
        }
      }
      .title_content:after{
        content: " ";
        height: 1px;
        display: block;
        width: 1rem;
        position: relative;
        left: 0;
        top: 1px;
        border:1px solid @mainColor;
      }
      .panel{
        margin:.2rem 0;
        box-shadow: 0 1px 1px rgba(0,0,0,0.05);
        background: #fff;
        .panel-heading{
          padding:.2rem .5rem;
          background: @mainColor;
          color:#fff;
          font-size: .35rem;
        }
        .panel-body{
          padding: 0.3rem;
          color: #999 !important;
          font-size: .25rem;
          font-family: 'Lato', sans-serif;
        }
      }
    }
  }
}


